import { defineComponent, PropType } from 'vue';
import { useNamespace } from '@ibiz-template/vue3-util';
import { IChatItem } from '../../interface';
import './chat-window.scss';

/**
 * Odoo聊天
 */
export const OdooChatWindow = defineComponent({
  name: 'IBizOdooChatWindow',
  props: {
    item: {
      type: Object as PropType<IChatItem>,
      required: true,
    },
  },
  emits: {
    close: () => true,
    remove: () => true,
  },
  setup(props, { emit }) {
    const ns = useNamespace('odoo-chat-window');
    const onClose = (): void => {
      emit('close');
    };
    const onRemove = (): void => {
      emit('remove');
    };
    return { ns, onClose, onRemove };
  },
  render() {
    return (
      <div class={this.ns.b()}>
        <div class={this.ns.e('header')}>
          <div class={this.ns.em('header', 'caption')}>{this.item.caption}</div>
          <div class={this.ns.e('actions')}>
            <div
              title='收拢'
              onClick={this.onClose}
              class={this.ns.em('actions', 'item')}
            >
              <ion-icon name='remove'></ion-icon>
            </div>
            <div
              title='关闭聊天'
              onClick={this.onRemove}
              class={this.ns.em('actions', 'item')}
            >
              <ion-icon name='close-outline'></ion-icon>
            </div>
          </div>
        </div>
        <div class={this.ns.e('content')}>
          <iBizViewShell
            params={this.item.params}
            context={this.item.context}
            viewId={this.item.appViewId}
          />
        </div>
      </div>
    );
  },
});
